<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>StudentCourses</title>
<script src="../jquery-3.5.1.js"></script>
<script src="../jquery.cookie.js"></script>
<script>var userid = sessionStorage.getItem('testKey');
if(userid == null || userid == "")
	{
	window.location = "/login.html";
	}
</script>
<style>
body {
	font-size: 75%;
	font-family: verdana, arial, 'sans serif';
	background-repeat: repeat-x;
	background-color: #FFFFF0;
	color: #000080;

}

h1 {
	font-size: 200%;
}

h2 {
	font-size: 140%;
}

h4 {
	font-size: 110%;
}

th {
	background-color: #ADD8E6;
}


.button1 {
	background-color: #000000;
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
}
.foot {
	position: fixed;
	bottom: 5px;
	text-align: center;
	padding: 10px;
	border-radius: 6px;
	background-image: linear-gradient(to bottom right, #ffb21a, #ffdd99);
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}
.active{

background-color: #bfbfbf;
}
</style>
<script>
window.onload=function(){
	var sid = sessionStorage.getItem('testKey');
	$.ajax({
		
        type: 'GET',
        url: "/courseSelectionBySid/"+sid,
        contentType: "application/json;cherset=utf-8",
        dataType: "json",
        success: function (data){
        	 	var InData=data;
                var html = "";
                console.log(data);
                var sid = sessionStorage.getItem('testKey');
                for(var i=0;i<data.length;i++){
           		 //访问每一个的属性，根据属性拿到值
           	       
  					html +="<tr>";
  					html +=		"<td>" + data[i].courseTeaching.course.name +"</td>";
  					html +=		"<td>" + data[i].courseTeaching.course.id +"</td>";
  					html +=		"<td>" + data[i].courseTeaching.semester +"</td>";
  					html +=		"<td>" + data[i].courseTeaching.course.credit +"</td>";
  					html +=		"<td>" + data[i].courseTeaching.year +"</td>";
  					html +=		"<td>" + data[i].courseTeaching.teacher.name +"</td>";
  					html += 	"<td><button type='button' onclick='cancelCou("+ data[i].id + ")'>退选</button></td>";
  					html +="</tr>";
           	    }
                
                $("#inTable").html(html);
                
                    
              } ,
        error: function (data) {
            alert("error:" + JSON.stringify(data));}
    });
	
}
function cancelCou(id) {
	console.log(id);
	if (confirm("真的要退选该课程？")) {
		$.ajax({
			type : "Delete",
			url : "/courseSelection/"+id,
			contentType : "application/json;cherset=utf-8",
			success : function() {
				alert("退选成功");
				location.reload();
			},
			error : function() {
				alert("error")
			}
		})
	}

}
</script>
</head>
<body>
<ul><!--导航栏 -->
  <li><a href="StudentPage.html">主页</a></li>
  <li><a href="CourseSelect.html">选课页面</a></li>
  <li><a href="StuScore.html">分数查询</a></li>
  <li><a class="active" href="StuCourses.html">查看已选课程</a></li>
  <li style="float:right"><a href="AccountModify.html">修改密码</a></li>
</ul>
<br/>
<table >
             <thead>
                <tr>
                    <th>课程名称</th>
                    <th>课程编号</th>
                    <th>开课学期</th>
                    <th>学分</th>
                    <th>学年</th>
                    <th>开课教师</th>
                   
                    <th></th>
         
                 </tr>
              </thead>
 
              <tbody  id="inTable">
              
              </tbody>
</table>
<div id="footer" class="foot">
		<em style="color: white">[made by group four]</em>
	</div>
</body>
</html>